<template>
  <div class="policy-data-bg">
    <div class="query-policy-bg">
      <el-form class="queryForm" ref="queryForm" :model="queryForm" :inline="true" label-width="100px" >
        <el-row>
          <el-col :span="8">
            <el-form-item label="统计类型:" prop="filterOption" style="display: inline-block;">
              <el-select v-model="queryForm.filterType" placeholder="请选择" class="ibput">
                <el-option label="按三级机构查看" value="01"></el-option>
                <el-option label="按分单区域查看" value="02"></el-option>
              </el-select>
            </el-form-item>
          </el-col>       
          <el-col :span="8">
            <el-form-item label="机构:">
              <el-select v-model="queryForm.institution" placeholder="请选择" clearable  class="ibput" >
                <el-option v-for="(item,index) in dividerList" :label="item.companyName" :value="item.companyCode" :key="index">
                  {{item.label}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行政区域:" v-if="flag == 2">
              <el-select v-model="queryForm.placeCode" placeholder="请选择" class="ibput" clearable>
                <el-option v-for="(item,index) in regionList" :label="item.label" :value="item.value" :key="index">
                  {{item.label}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据类型:" prop="statistical type" style="display: inline-block;">
              <el-select v-model="queryForm.statisticalType" placeholder="请选择统计类型" class="ibput" >
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="续期服务类型:">
              <el-select v-model="queryForm.RenewalServiceType" placeholder="请选择" class="ibput">
                <el-option label="转续保" value="0"></el-option>
                <el-option label="其他服务" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道:">
              <el-select v-model="queryForm.channel" placeholder="请选择" clearable class="ibput">
                <el-option label="个险" value="01"></el-option>
                <el-option label="银保" value="02"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="交次:">
              <el-select v-model="queryForm.payTime" placeholder="请选择" clearable class="ibput">
                <el-option label="二次" value="2"></el-option>
                <el-option label="三次" value="3"></el-option>
                <el-option label="四次及以上" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否考核件:">
              <el-select v-model="queryForm.EvaluationPiece" placeholder="请选择" clearable class="ibput">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应交月:" prop="submitMonth">
              <el-date-picker v-model="queryForm.submitMonth" placeholder="请选择应交月" :editable="false" type="month" format="yyyy-MM" value-format="yyyy-MM"  class="ibput"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row> -->
          <!-- <el-col :span="21"> -->
            <div class="query-btn">
              <el-button size="small" @click="handleReset()">重置</el-button>
              <el-button type="primary" size="small" @click="handleQuery()">查询</el-button>
            </div>
          <!-- </el-col> -->
        <!-- </el-row> -->
      </el-form>
    </div>
    <div class="policy-echart-bg">
      <!-- <el-radio-group v-model="queryForm.filterType" style="margin-bottom: 20px;">
        <el-radio label="1">按三级机构查看</el-radio>
        <el-radio label="2">按分单区域查看</el-radio>
      </el-radio-group> -->
      <div id="policyChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getChartData,getCompanyList } from '../../../api/renewalPlatformApi/index';

export default {
  name: 'PolicyShow',
  props: {
    currentTab: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      typeList: [
        { label: '按工作量', value: '1' },
        { label: '按保单件数', value: '2' },
        { label: '按保费', value: '3' },
      ],
      regionList:[
        { label:'锡山区',value:'320205' },
        { label:'惠山区',value:'320206' },
        { label:'滨湖区',value:'320211' },
        { label:'梁溪区',value:'320213' },
        { label:'江阴市',value:'320281' },
        { label:'宜兴市',value:'320282' },
      ],
      queryForm: {
        filterOption:'1',
        institution:'',
        placeCode:'',
        statisticalType:'',
        RenewalServiceType:'',
        channel:'',
        payTime:'',
        EvaluationPiece:'',
        submitMonth: '',
        filterType: '01'
      },
      flag:1,
      dividerList:[],
    }
  },
  watch: {
    currentTab() {
      this.handleQuery()
    },
    'queryForm.filterType':{
      handler(val){
        this.flag = val
      }
    }
  },
  mounted() {
    this.handleQuery()
    this.getList()
  },
  methods: {
    getList() {
      getCompanyList({ companyType: '3',parentCode:'8601' }).then((res) => {
        if (res.code === 200) {
          res.data.forEach(item => {
            let temp = {
              companyCode: item.companyCode,
              companyName: item.companyName,
              placeCode: item.placeCode,
              isShowSon: false,
              checked: [],
              cityList: []
            }
            this.dividerList.push(temp);
          });
        }
      }).finally(() => {})
    },
    handleQuery() {
      const params = {
        filterType: this.currentTab,
        companyCode:this.queryForm.institution,
        ...this.queryForm
      }
      getChartData(params).then(res => {
        if (res.code == 200) {
          this.initChart(res.data)
        }
      })
    },
    handleReset(){},
    initChart(data) {
      let chartDom = document.getElementById('policyChart');
      let myChart = echarts.init(chartDom);
      let emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      };
      let option = {
        legend: {
          data: ['保单', '大额单','高难度单'],
          right: 20
        },
        toolbox: {},
        tooltip: {},
        xAxis: {
          type: 'category', 
          data: data.name,
          triggerEvent: true,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
          axisLabel: {
            formatter: function (value, index) {
              let maxLength = 5; // 设置最大长度
              if (value.length > maxLength) {
                return value.substring(0, maxLength) + '...'; // 使用省略号代替超出的字符
              } else {
                return value; // 正常显示名称
              }
            },
            rich: { // 设置富文本样式
              normal: {
                color: '#333', // 字体颜色
                fontSize: 12, // 字体大小
                textDecoration: 'none' // 取消下划线等装饰效果
              }
            }
          },
        },
        yAxis: {
          name: '工作量',
        },
        grid: {
          show:false,
          left: 60,
          bottom: 60
        },
  
        series: [
          {
            name: '保单',
            type: 'bar',
            emphasis: emphasisStyle,
            data: data.cont,
            barWidth: '20%'
          },
          {
            name: '大额单',
            type: 'bar',
            emphasis: emphasisStyle,
            data:data.bigCont
          },
          {
            name: '高难度单',
            type: 'bar',
            emphasis: emphasisStyle,
            data:data.highHard,
          },
        ]
      };
      
      option && myChart.setOption(option);
      this.extension(myChart)
    },
    extension(myChart) {
      // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
      // 判断是否创建过div框,如果创建过就不再创建了
      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
      let elementDiv = document.getElementById('chart')
      if (!elementDiv) {
        let div = document.createElement('div')
        div.setAttribute('id', 'extension')
        div.style.display = 'block'
        document.querySelector('html').appendChild(div)
      }
      myChart.on('mouseover', function(params) {
        if (params.componentType === 'xAxis') {
          let elementDiv = document.querySelector('#extension')
          //设置悬浮文本的位置以及样式
          elementDiv.style.cssText = 'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;' +
              'border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.innerHTML = params.value
          document.querySelector('html').onmousemove = function(event) {
            let elementDiv = document.querySelector('#extension')
            // 获取鼠标位置
            let xx = event.pageX - 10
            let yy = event.pageY + 20
            //设置边框位置
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      myChart.on('mouseout', function(params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType === 'xAxis') {
          let elementDiv = document.querySelector('#extension')
          elementDiv.style.cssText = 'display:none'
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.policy-data-bg{
  margin-top: 20px;
  .query-policy-bg{
    position: relative;
    display: flex;
    align-items: center;
    .queryForm{
      width: 100%;
      .ibput{
        width: 320px;
      }
    }
    .query-btn{
      flex: 1;
      text-align: right;
      position: absolute;
      right: 186px;
    }
  }
  .policy-echart-bg {
    margin-top: 20px;
    #policyChart {
      width: 100%;
      height: 500px;
      margin-top: 70px;
    }
  }
}
</style>
